<template>
    <div>
        <slider :slides="slides" announcement="今日上架图书全部八折"></slider>
        <booklist :books="latesUpdated" heading="最近更新" @onBookSelect="preview($event)"></booklist>
        <modal-dialog ref="dialog">
            <div slot="heading">
            </div>
            <div>
                <div v-if="selected">
                    <h2>{{ selected.title }}</h2>
                </div>
            </div>
        </modal-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import slider from "./Slidera.vue"
    import booklist from "./booklist.vue"
    import ModalDialog from "./dialog.vue"
    import faker from "./fixtures/faker"
    export default{
        components:{slider,booklist,ModalDialog},
        created(){
            this.page_data = faker.getHomeData()
            this.$http.get('/data.json').then(res =>{
                console.log(res);
                this.latesUpdated=res.body.latesUpdated;
                this.slides=res.body.slides;
            })
        },
        data(){
            return {
                latesUpdated: [],
                slides: [],
                page_data: undefined,
                selected:undefined
            }

        },
        mounted(){
            document.title = "Book store"
        },
        methods:{
                preview (book) {
                    this.selected = book
                    this.$refs.dialog.open()
                }
            }
    }
</script>